<template>
  <div class="area">
    <div class="area_left">
      <p
        @click="oneClick(v, i)"
        :class="oneIndex === i ? 'active' : ''"
        v-for="(v, i) in areaList"
        :key="i"
      >
        {{ v.name }}
      </p>
    </div>
    <div class="area_middle">
      <p
        @click="twoIndex = i"
        :class="twoIndex === i ? 'active' : ''"
        v-for="(v, i) in areaList[oneIndex].city"
        :key="i"
      >
        {{ v.name }}
      </p>
    </div>
    <div class="area_right">
      <p
        @click="twoClick(i)"
        :class="threeIndex === i ? 'active' : ''"
        v-for="(v, i) in areaList[oneIndex].city[twoIndex].area"
        :key="i"
      >
        {{ v }}
      </p>
    </div>
  </div>
</template>

<script>
import axios from "../axios/index";
export default {
  data() {
    return {
      areaList: [],
      oneIndex: 0,
      twoIndex: 0,
      threeIndex: 0,
    };
  },
  methods: {
    getAreaList() {
      axios.get("/city").then((res) => {
        this.areaList = res.data;
        console.log(res.data);
      });
    },
    twoClick(index) {
      this.threeIndex = index;
      this.$emit("submit", "");
    },
    oneClick(v, index) {
      this.oneIndex = index;
      this.$emit("oneClick", v.name);
      // console.log(this.areaList[index].city);
    },
  },
  created() {
    this.getAreaList();
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.area {
  width: 97%;
  position: absolute;
  top: 210px;
  left: 0;
  display: flex;
  background: #fff;
}
.area_left {
  flex: 1;
  height: auto;
}
.area_middle {
  flex: 2;
  height: auto;
  background: #eee;
}
.area_right {
  flex: 2;
  height: auto;
  background: #ddd;
}
.area_left p,
.area_middle p,
.area_right p {
  text-align: center;
  line-height: 30px;
}
.area_left p.active,
.area_middle p.active,
.area_right p.active {
  color: red;
}
</style>